<template>
  <a-breadcrumb class="container-breadcrumb">
    <a-breadcrumb-item>
      <icon-apps />
    </a-breadcrumb-item>
    <a-breadcrumb-item v-for="(item, index) in items" :key="index">
      {{ item.meta.label || $t(item.meta.locale as string) }}
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { computed } from 'vue';

  const appStore = useAppStore();
  const items = computed(() => appStore.appBreadcrumbList);
</script>

<style scoped lang="less">
  .container-breadcrumb {
    margin: 16px 0;
    padding: 0 20px;
    :deep(.arco-breadcrumb-item) {
      color: rgb(var(--gray-6));
      &:last-child {
        color: rgb(var(--gray-8));
      }
    }
  }
</style>
